<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Babylon.js sample code</title>

    <!-- Babylon.js -->
    <script src="./js/pep.js"></script>
    <script src="./js/dat.gui.min.js"></script>
    <script src="./js/ammo.js"></script>
    <script src="./js/cannon.js"></script>
    <script src="./js/Oimo.js"></script>
    <script src="./js/libktx.js"></script>
    <script src="./js/earcut.min.js"></script>
    <script src="./js/babylon.js"></script>
    <script src="./js/babylon.inspector.bundle.js"></script>
    <script src="./js/babylonjs.materials.min.js"></script>
    <script src="./js/babylonjs.proceduralTextures.min.js"></script>
    <script src="./js/babylonjs.postProcess.min.js"></script>
    <script src="./js/babylonjs.loaders.js"></script>
    <script src="./js/babylonjs.serializers.min.js"></script>
    <script src="./js/babylon.gui.min.js"></script>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(.5, .5, .5);

        // camera
        var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
        camera.setPosition(new BABYLON.Vector3(14, 8, -12));
        camera.attachControl(canvas, true);
        // lights
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
        light.intensity = 0.8;

        // material
        var mat = new BABYLON.StandardMaterial("mat1", scene);
        mat.alpha = 1.0;
        mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
        mat.backFaceCulling = false;

        /************Start Pilot*********************************/
        var body = BABYLON.MeshBuilder.CreateCylinder("body", { height: 0.75, diameterTop: 0.2, diameterBottom: 0.5, tessellation: 6, subdivisions: 1 }, scene);
        var arm = BABYLON.MeshBuilder.CreateBox("arm", { height: 0.75, width: 0.3, depth: 0.1875 }, scene);
        arm.position.x = 0.125;
        var pilot = BABYLON.Mesh.MergeMeshes([body, arm], true);
        /*************End Pilot****************************************/

        /************Set Center of Rotation (CoR) Position, Axis and Pilot Start Position********/
        var CoR_At = new BABYLON.Vector3(1, 3, 2);
        var axis = new BABYLON.Vector3(2, 6, 4);
        var pilotStart = new BABYLON.Vector3(3, 6, 6);
        /****************************************************************/

        /****************Draw Axis and Sphere to show Pivot Position*****************/
        var axisLine = BABYLON.MeshBuilder.CreateLines("axisLine", { points: [CoR_At.add(axis.scale(-50)), CoR_At.add(axis.scale(50))] }, scene);

        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 0.25 }, scene);
        sphere.position = CoR_At;
        /****************************************************************/

        /**********Parent at Pivot Position, Position Child with Pivot Matrix*********/
        pilot.parent = sphere;
        //pivot translation to mesh starting position
        var pilotTranslate = pilotStart.subtract(CoR_At);
        pilot.setPivotMatrix(BABYLON.Matrix.Translation(pilotTranslate.x, pilotTranslate.y, pilotTranslate.z));
        pilot.position = pilotTranslate;
        /***************************************************************/


        /**************Animation of Rotation**********/
        var angle = 0.02;
        scene.registerAfterRender(function () {
            pilot.rotate(axis, angle, BABYLON.Space.WORLD);
        });

        /***************************************************************/

        // show axis
        var showAxis = function (size) {
            var makeTextPlane = function (text, color, size) {
                var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
                dynamicTexture.hasAlpha = true;
                dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
                var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
                plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
                plane.material.backFaceCulling = false;
                plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                plane.material.diffuseTexture = dynamicTexture;
                return plane;
            };

            var axisX = BABYLON.Mesh.CreateLines("axisX", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
                new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
            ], scene);
            axisX.color = new BABYLON.Color3(1, 0, 0);
            var xChar = makeTextPlane("X", "red", size / 10);
            xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
            var axisY = BABYLON.Mesh.CreateLines("axisY", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
                new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
            ], scene);
            axisY.color = new BABYLON.Color3(0, 1, 0);
            var yChar = makeTextPlane("Y", "green", size / 10);
            yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
            var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
                new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, -0.05 * size, size * 0.95),
                new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3(0, 0.05 * size, size * 0.95)
            ], scene);
            axisZ.color = new BABYLON.Color3(0, 0, 1);
            var zChar = makeTextPlane("Z", "blue", size / 10);
            zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);
        };


        showAxis(8);

        return scene;
    };
    var engine;
    try {
        engine = createDefaultEngine();
    } catch(e) {
        console.log("the available createEngine function failed. Creating the default engine instead");
        engine = createDefaultEngine();
    }
    if (!engine) throw 'engine should not be null.';
    scene = createScene();;
    sceneToRender = scene

    engine.runRenderLoop(function () {
        if (sceneToRender) {
            sceneToRender.render();
        }
    });

    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
</script>
</body>
</html>
